<template>
  <div class="line-box">
    <div class="board-title">设备利用率
     
    </div>
    <div class="time-form" style="width:300px;">
       <el-date-picker
      v-model="time"
      type="daterange"
      align="right"
      size="small"
      :clearable="false"
      unlink-panels
      value-format="yyyy-MM-dd"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="getData"
      :picker-options="pickerOptions">
    </el-date-picker>
    </div>
    <div ref="utilizationLine" style="height: 200px"></div>
    <!-- <div v-if="barLength < 1" style="position: relative; top: -475px">
      <div class="no-data">暂无数据</div>
    </div> -->
  </div>
</template>

<script>
import * as echarts from "echarts";
import resize from "./mixins/resize";
import {formatDate} from '@/utils/index'
import {getEquipmentAvailability} from '@/api/board.js'
export default {
  mixins: [resize],
  data() {
    return {
      autoResize: true,
      chart: null,
      time:null,
       pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      chartData: {
        expectedData: ['设备一', '设备二', '设备三', '设备四', '设备五', '设备六', '设备七', '设备八','设备九'],
        actualData: [40, 60, 32, 55, 63, 60, 71, 42, 50],
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              this.time=[start,end]
              let time=[formatDate(this.time[0]),formatDate(this.time[1])]
      // this.initChart();
      this.getData(time)
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    //  formatDate:formatDate,
    getData(time){
      getEquipmentAvailability(time).then(res=>{
        this.chartData.expectedData=res.data.map(item=>{
          return item.equipmentName
        })
        this.chartData.actualData=res.data.map(item=>{
          return item.availability
        })
        this.initChart();
      })
    },
    initChart() {
      this.chart = echarts.init(this.$refs.utilizationLine, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        xAxis: {
          data: expectedData,
          axisTick: {
            show: false,
          },
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 25,
          top: 30,
          containLabel: true,
        },
        dataZoom: [
          {
            show: expectedData.length > 8 ? true : false,
            height: 12,
            xAxisIndex: [0],
            bottom: "4%",
            start: 0,
            end:
              expectedData.length > 8 ? (8 / expectedData.length) * 100 : 100,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "100%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#000",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            start: 0,
            end: 100,
          },
        ],
        tooltip: {
          show: false,
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          // padding: [5, 10],
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          axisLabel: {
            formatter: "{value}%",
          },
        },
        legend: {
          data: ["expected"],
        },
        series: [
          {
            name: "actual",
            smooth: true,
            type: "bar",
            barWidth : 20,//柱图宽度
            itemStyle: {
              normal: {
                color: "#3888fa",
                lineStyle: {
                  color: "#3888fa",
                  width: 2,
                },
                areaStyle: {
                  color: "#f3f8ff",
                },
              },
            },
            data: actualData,
            animationDuration: 2800,
            animationEasing: "quadraticOut",
          },
        ],
      });
    },
  },
};
</script>

<style scoped lang="scss">
.line-box {
  margin-top: 10px;
  padding: 10px;
  background: #fff;
  position: relative;
}
.time-form{
  position: absolute;
  right: 15px;
  top:10px;
}
</style>